<template>
  <NavBar
    :leftArrow="true"
    :title="title"
    @onClickLeft="goBack" />
  <div
    v-if="pageInfo.result === 'fail'"
    class="result_fail">
    <div>识别失败</div>
    <div @click="toCommunity">去社区看看吧 >></div>
  </div>
  <div
    v-if="pageInfo.result === 'success'"
    class="original_data">
    <div class="pic">
      <image
        :src="recognizeData.imgUrl"
        mode="aspectFill" />
    </div>
    <div class="name">
      <text>识别结果</text>
      {{ recognizeData.nameCN }}
    </div>
    <div class="accuracy">
      <text>准确率</text>
      {{ recognizeData.accuracy }}
    </div>
  </div>
  <!-- 识别结果 -->
  <div
    v-if="pageInfo.result === 'success'"
    class="result_detail">
    <div class="pic">
      <image
        :src="globalParams.baseUrl + result.imgUrl"
        mode="aspectFill" />
    </div>

    <div class="info">
      <div class="name">{{ result.name }}</div>
      <div class="info_item">
        <text>学名</text>
        {{ result.scientificName }}
      </div>
      <div class="info_item">
        <text>概述</text>
        {{ result.overview }}
      </div>
      <div class="info_item">
        <text>用途</text>
        {{ result.usage }}
      </div>
      <div class="info_item">
        <text>状态</text>
        {{ result.state }}
      </div>
      <div class="info_item">
        <text>属性</text>
        {{ result.attributes }}
      </div>
      <div class="info_item">
        <text>备注</text>
        {{ result.note }}
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import {
  getPlantByName,
  getPlantById,
  getKnowledgePlantById,
  getKnowledgePlantByName,
} from "../../api/plant";
import { globalParams } from "../../../public/config.js";

export default {
  computed: {
    ...mapState(["recognizeData"]),
  },
  data() {
    return {
      title: "识别结果",
      result: {},
      plantsInfoArr: [
        {
          name: "daisy",
          name_cn: "雏菊",
          id: "5",
        },
        {
          name: "dandelion",
          name_cn: "蒲公英",
          id: "4",
        },
        {
          name: "roses",
          name_cn: "玫瑰",
          id: "3",
        },
        {
          name: "sunflowers",
          name_cn: "向日葵",
          id: "6",
        },
        {
          name: "tulips",
          name_cn: "郁金香",
          id: "7",
        },
      ],
      globalParams,
      pageInfo: {},
    };
  },
  onLoad(options) {
    this.pageInfo = options;
    console.log("result page onLoad", options);
    console.log("recognizeData", this.recognizeData);
    if (options.result === "success") {
      this.plantsInfoArr.forEach((item) => {
        if (this.recognizeData.name === item.name) {
          this.recognizeData.nameCN = item.name_cn;
          this._getRecognizeData(item.id);
        }
      });
    }
  },
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack({ delta: 1 });
    },
    // 获取识别结果
    async _getRecognizeData(id) {
      let { data: res } = await getKnowledgePlantById({ id: id });
      console.log("get recognize data", res);
      if (res.code === 200) {
        this.result = res.data;
      }
    },
    // 跳转至社区
    toCommunity() {
      console.log("跳转到社区页面");
      uni.navigateTo({
        url: "/pages/community/community?type=community&title=社区",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.result_fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0px 4px 16px 0px #edeef0;

  padding: 16px;
  margin: 16px;
  border-radius: 12px;
  :first-child {
    font-size: 24px;
    font-weight: bold;
    margin: 16px 0;
  }
  :last-child {
    font-size: 16px;
    color: #1b54d9;
    margin-top: 16px;
  }
}
.original_data {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #ffffff;
  .pic {
    margin: 16px 16px 0 16px;
    border-radius: 12px;
    box-shadow: 0px 4px 16px 0px #edeef0;
  }
  text {
    font-weight: bolder;
    margin-right: 8px;
  }
  .name {
    padding: 16px;
    margin-left: 16px;
    margin-right: auto;
  }
  .accuracy {
    padding: 0 16px 16px 16px;
    margin-left: 16px;
    margin-right: auto;
  }
}

.result_detail {
  bottom: 16px;
  .info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background-color: #ffffff;
    border-radius: 12px;
    margin: 16px;
    box-shadow: 0px 4px 16px 0px #edeef0;

    .name {
      font-weight: bold;
      font-size: 24px;
    }
    .info_item {
      text {
        font-weight: bold;
        font-size: 16px;
      }
      font-size: 14px;
    }
  }
  .pic {
    height: 192px;
    margin: 16px 16px 0 16px;
    border-radius: 12px;

    box-shadow: 0px 4px 16px 0px #edeef0;

    image {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
  }
}
</style>
